<template>
	<div class="home_box">
		<div class="home_box_header">
			<div>
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198">
					<path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path>
					<path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path>
					<path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path>
				</svg>
				<span>后台管理系统</span>
			</div>
			<div>
				<router-link to="/" style="color: white">退出</router-link>
			</div>
		</div>
		<div class="home_box_content">
			<div>
				<Menu />
			</div>
			<div>
				<div style="border: 1px solid #ccc;">
					面包屑
				</div>
				<div>
					<router-view v-slot="{ Component }"> <component :is="Component"></component> </router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup></script>

<style scoped lang="scss">
	.home_box {
		width: 100vw;
		height: 100vh;
		&_header {
			width: 100%;
			background-color: #353d40;
			color: white;
			height: 15vh;
			padding: 0 20px;
			border: 1px solid #ccc;
			display: flex;
			justify-content: space-between;
			align-items: center;
			> div:nth-of-type(1) {
				display: flex;
				align-items: center;
			}
			> div:nth-of-type(2) {
				background-color: #90939a;
				color: white;
				border-radius: 6px;
				cursor: pointer;
				height: 30px;
				width: 60px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		&_content {
			height: 85vh;
			display: flex;
			> div:nth-of-type(1) {
				height: 100%;
				width: 200px;
				border-right: 1px solid #ccc;
			}
			> div:nth-of-type(2) {
				width: calc(100vw - 200px);
			}
		}
	}
</style>
